<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>出差审批</title>
</head>
<body>
<script type="text/javascript">
$(function(){
	//初始化表格
	$('#table1').datagrid({
		url:'business_selectAll',
		singleSelect:true,
		
		frozenColumns: [[
			 	{field:'sortable',title:'#',width:28,align:'center'},
				{field:'Staff_name',title:'姓名',width:100,align:'center'},
				{field:'depart_name',title:'部门',width:100,align:'center'},
		]],
		columns:[[
   	 		{field:'bus_id',hidden:true},
   	 		{field:'bus_shen',hidden:true},
   	 		
			{field:'bus_date',title:'申请时间',width:120,align:'center',
   	 			formatter:function(val,rec){
					return formattimes(val);
	        	}
   	 		},
			{field:'bus_kai',title:'开始时间',width:200,align:'center',
				formatter:function(val,rec){
					return formattime(val);
		        }
			},
			{field:'bus_jie',title:'结束时间',width:200,align:'center',
				formatter:function(val,rec){
					return formattime(val);
		        }
			},
			{field:'bus_sheng',title:'出差省',width:120,align:'center'},
			{field:'bus_shi',title:'出差市',width:120,align:'center'},
			{field:'b_sta',title:'审批状态',width:100,align:'center'},
			{field:'bus_why',title:'申请理由',width:210,align:'center'},
			{field:'caozuo',title:'操作',width:150,align:'center',
				formatter: function(value,row,index){
					if(row['bus_shen']==0){
						return "<button class='btn3' id='btn-guo' onclick='guo("+row['bus_id']+",1)'>通过</button><button class='btn3' id='btn-guo' onclick='bo("+row['bus_id']+"),2'>驳回</button>";
					}else{
						return "<button class='btn3' id='btn-xiang' onclick='xiang("+row['bus_id']+")'>查看</button>";
					}
				}
			}
   	 	]],
	    pagination:true,
	    pageNumber:1,
	    pageSize:5,
	    pageList:[5,10,15]
	   
	});
	$('#table2').datagrid({
		url:'',
	    pagination:true,
	    pageNumber:1,
	    pageSize:5,
	    pageList:[5,10,15]
	});
	$(".title-left").children().click(function(){
		$(".title-left").children().removeClass("title-left-divclike");
		$(this).addClass("title-left-divclike");
	});
	$(".title-left-div1").click(function(){
		$(".body-table2").hide();
		$(".body-table1").show();
	});
	$(".title-left-div2").click(function(){
		$(".body-table1").hide();
		$(".body-table2").show();
	});
	$(".title-left-div1").addClass("title-left-divclike");
	

});
function guo(id,shen){
	$("#form").form('load','business_shen?id='+id+'&&shen='+shen);
	$("#content-admin").panel('open').panel('refresh','kq-business-assessor');
}
function xiang(id){
	$("#content-admin").panel({
		href:"kq-business-cha?id="+id
	});
}
function formattime(value,row,index){
	var date = new Date(value);
	        var year = date.getFullYear().toString();
	        var month = (date.getMonth() + 1);
	        var day = date.getDate().toString();
	        var hour = date.getHours().toString();
	        var minutes = date.getMinutes().toString();
	        if (month < 10) {
	            month = "0" + month;
	        }
	        if (day < 10) {
	            day = "0" + day;
	        }

	        return year + "-" + month + "-" + day;
}
function formattimes(value,row,index){
	var date = new Date(value);
    var year = date.getFullYear().toString();
    var month = (date.getMonth() + 1);
    var day = date.getDate().toString();
    var hour = date.getHours().toString();
    var minutes = date.getMinutes().toString();
    if (month < 10) {
        month = "0" + month;
    }
    if (day < 10) {
        day = "0" + day;
    }
    if (hour < 10) {
        hour = "0" + hour;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
   
    return year + "-" + month + "-" + day + " " + hour + ":" + minutes ;
}
</script>
<style type="text/css">
	.index-body1{
		padding: 20px;
    	background-color: #f3f3f3;
    	padding-bottom: 30px;
	}
	.index-body2{
		width: 100%;
	    height: 100%;
	    background-color: #fff;
	}
	.index-body3{
		min-width: 950px;
	     padding: 20px;
	    position: relative;
	}
	.title-left{
		display: inline-block;
	    float: left;
	    font-size: 12px;
	   	color: gray;
	}
	.title-left span{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	}
	.title-left-divclike{
		background-color: #19AA8D!important;
    	color: #fff;
	}
	.title-left div{
		width: 130px;
	    height: 30px;
	    margin-right: 3px;
	    border-radius: 4px 4px 0 0;
	    text-align: center;
	    cursor: pointer;
	    float: left;
	    line-height: 30px;
	    background-color: #fff;
	    margin-top: 3px;
	    font-size: 14px;
	}
	.title-right{
		float: right;
	}
	.title-right div{
		float: left;
		margin-right: 20px;
	}
	.title-right div input{
		background-color: inherit;
		height: 22px;
	    padding: 0 4px;
	    font-size: 12px;
	    border-radius: 2px;
	    border: 1px solid #eee;
	}
	.title-right-btn{
		padding: 2px 8px 1px 8px;
    	font-size: 12px;
    	border-radius: 3px;
    	color: #666;
    	background-color: #fff;
    	border-color: #13826b1c!important;
    	border-color: #e5e6e7;
	}
	.datagrid-header-row td{
		background: #6666661a;
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	    text-align: center;
	}
	.datagrid-row td{
		background: #fff;
		font-size: 12px;
		text-align: center;
	}
	ul{
	list-style:none;
	margin: 0px;
	}
	.top-se>li,.date-search{
	float:left;
	padding-right: 5px;
    padding-left: 5px;
	}
	.top-se span{
		font-size: 12px;
		color: gray;
	}
	.btn3{
		margin-right: 10px;
    	border-radius: 4px;
    	cursor: pointer;
    	background-color: #19AA8D!important;
    	color: #fff!important;
    	border-color: #13826b33!important;
    	border: 1px solid transparent;
	}
	.body-table2{
		display: none;
	}
	.textbox{
		height: 25px;
	}
</style>
<div class="index-body1">
	<div class="index-body2">
			<div class="index-body3">
				<div class="title">
					<div class="title-left"> 
						<div class="title-left-div1">出差审批</div>
						<div class="title-left-div2">出差补录审批</div>
					</div>
					<div class="title-right"> 
						<ul class="top-se">
							<li></li>
							<li><span>开始时间</span></li>
							<li><input id="title-right-input1" type="text" class="easyui-datebox" required="required" style="width:150px" placeholder="请选择部门"></li>
							<li><span>至</span></li>
							<li><input id="title-right-input2" type="text" class="easyui-datebox" required="required" style="width:150px" placeholder="请输入员工姓名"></li>
							<li><button class="title-right-btn">搜索</button></li>
						</ul>
				</div>
				</div>
				<div class="body-table1">
					<table id="table1" class="easyui-datagrid"  data-options="width:1023,height:300">
					 
					</table>
				</div>
				<div class="body-table2">
					<table id="table2" class="easyui-datagrid" data-options="width:1023,height:300">
					</table>
				</div>
			</div>
		</div>
	</div>
	<Form action="" method="post" id="form">
	
	</Form>
</body>
</html>